<template>
	<view :data-theme="theme" :class="theme" :style="globalColor.style">
		<HeadCustom title=" " :isAppBtn="false"></HeadCustom>
		<view class="userName fboxCol">
			<view class="btn_box"><view class="btn" @tap="skipPage">跳过</view></view>
			<view class="userDetail fboxCol Xcenter Ycenter flex1">
				<text class="text_big font38">个人形象照</text>
				<text class="text_min font26">添加个性化的个人形象照，更能展现自我</text>
				<view class="img_box fboxRow Xcenter Ycenter" @tap="slectImg">
					<image v-if="!user.avatar" class="img_add" src="https://ebc-prod.cdn.benwunet.com/uni-static/h5/addImg.png" mode="aspectFill"></image>
					<image class="img_avtar" v-else :src="user.avatar" alt="" mode="aspectFill"></image>
				</view>
				<text class="text_big font38">姓名</text>
				<text class="text_min font26">请填写您的真实姓名</text>
				<view class="ipt_box"><u--input placeholder="输入姓名" v-model="user.realName" :focus="true" border="none" placeholderClass="placeholderClass"></u--input></view>
			</view>
			<BottomBtn :title="tabbarBtnTitle" @btnClick="goNextPage"></BottomBtn>
		</view>
	</view>
</template>

<script>
import BottomBtn from '@/components/bottom-btn/index.vue';
import { fileUploadAnon } from '@/api/index.js';
import { completeInformation } from '@/api/mine.js';
import { debounce } from '@/static/js/common.js';
export default {
	components: { BottomBtn },
	data() {
		return {
			theme: getApp().globalData.appTheme,
			globalColor: getApp().globalData.globalColor,
			tabbarBtnTitle: '下一步',
			user: {
				realName: '',
				avatar: ''
			}
		};
	},
	methods: {
		// 跳过
		skipPage: debounce(function() {
			completeInformation({}).then(res => {
				this.$pageTo('/index/index');
			});
		}, 1000),
		// 下一步
		goNextPage() {
			this.$pageTo('/perfectusermsg?realName=' + this.user.realName + '&avatar=' + this.user.avatar);
		},
		// 头像选中数据
		slectImg() {
			const that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function(res) {
					const file = res.tempFiles[0];
					file.url = file.path;
					fileUploadAnon(file).then(res => {
						if (res.data) {
							that.user.avatar = res.data.url;
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
::v-deep .uni-input-input {
	color: #6b707c;
	font-size: 38rpx;
	font-weight: 400;
	text-align: center;
}
.userName {
	.btn_box {
		padding: 40rpx;
		.btn {
			background-color: #e8cda7;
			border-radius: 8rpx;
			padding: 13rpx 30rpx;
			float: right;
			color: var(--controllerBgColor);
		}
	}
	.userDetail {
		padding-top: 80rpx;
		.text_big {
			font-weight: 700;
			line-height: 56rpx;
			color: #e8cda7;
		}
		.ipt_box {
			// padding-top: 40rpx;
			padding-bottom: 10rpx;
			border-bottom: 1rpx solid #2d3341;
			width: 330rpx;
			margin: 40rpx 0;
			.placeholderClass {
				font-size: 38rpx;
				font-weight: 400;
				color: #6b707c;
				line-height: 56rpx;
				text-align: center;
			}
		}
		.text_min {
			font-weight: 400;
			color: #6b707c;
			line-height: 38rpx;
			margin-top: 40rpx;
		}
		.img_box {
			height: 240rpx;
			width: 240rpx;
			background-color: var(--viewBgColor);
			border-radius: 12rpx;
			margin: 160rpx 0;
			.img_avtar {
				height: 240rpx;
				width: 240rpx;
				border-radius: 12rpx;
			}
			.img_add {
				width: 48rpx;
				height: 48rpx;
			}
		}
	}
}
</style>
